As many of us know, mobile applications have quickly gained popularity, as the use of mobile devices have
increased in day to day living. Instead of having to go through phone books or the newspaper to find
restaurants to dine at, many restaurants have their own mobile app where people can view the menu and make
reservations, which is exactly what the Family of Eateries application offers. This is a mobile app
developed for a fictional set of three restaurants, where users can navigate through designated pages for
each one. Users can view restaurant details, such as their hours of operation, nightly specials, covid
protocols, and make a reservation - all within the tap of a few buttons. This mobile app showcases an
accessible interface design, making it easy for users to quickly get familiar with the flow of the app. The
goal of the design was to make something that was feasible while maintaining an aesthetic visual.
LAUNCH THE APP
The project started with planning and sketching initial ideas in my notebook, just to organize possible
concepts for the branding. Conducting research to get references on how similar restaurants were
presented helped me solidify the designs for each restaurant. As I performed my research, I created a
word map that outlined any words that I thought fit the restaurants and their brand stories. Really
taking the time to dive into each restaurant's meaning, allowed me to successfully make designs that
ties into what they stand for.
All photography and video assets were taken weeks prior to designing the interactive stations. I was
responsible for photographing and editing all the images featured throughout the installation, alongside
capturing a series of videos for the motion graphics' promotional station. In the process of meeting the
shotlist requirement that was given by the clients, I traveled to multiple trails, allowing me to not
only After sketching and noting all my ideas, I brought them to life digitally by creating the logos and
supporting assets, such as icons, in Illustrator, and designing their initial interface concept in Adobe
XD. Designing the app in Adobe XD, rather than going straight into coding it, allowed me to work
effectively, as it gave me the opportunity to not only present a mockup to the client, but to plan and
test the app prior to coding it. Once the design was approved by the client, the coding began: all the
transitions and assets from the XD file were transferred into the final version HTML, CSS, and
JavaScript.
The emphasis I placed on the preproduction work allowed for an outcome that satisfied the client, as I
was able to work out any issues in the earlier stages, allowing for the clients to receive the clean and
accessible interface they desired.
In addressing the challenges encountered during the development of my touch screen ordering app, I implemented strategic solutions to ensure a successful outcome. To overcome the integration complexities with diverse point-of-sale systems and restaurant databases, I developed a modular and scalable architecture. This approach facilitated seamless connectivity and adaptability to various technical environments. Focusing on user experience, I conducted extensive usability testing and feedback sessions, incorporating valuable insights to refine the touch interface.
Achieving the right balance between functionality and design, I employed an iterative development process, allowing for continuousenhancements based on user input. Concerning security, I implemented robust encryption protocols and regularly updated the app to address emerging threats, prioritizing the protection of user data and transactions. By adopting these solutions, the touch screen ordering app not only navigated the challenges successfully but also emerged as a reliable and user-centric solution, enhancing the overall dining experience for users.
Ceviche:
High end restaurant that serves gourmet meals and flavours.
Five Vines:
Traditional Italian family restaurant that serves authentic Italian meals that makes you feel like you're
dining in Italy.
Crispys:
Fast food restaurant that specializes in fries.
This project called for lots of design work, HTML/CSS, and JavaScript, including jQuery. All these assets
combined, allowed for me to create an app that gives users an intriguing - yet simple - way to checkout
their favourite restaurants in one central app.
This project involved an ample amount of design work and html/css. Alongside that, there was a lot of
JavaScript including jQuery and GSAP used throughout. The main point of creating this app was to give a user
an exciting and simplistic way to view their favourite restaurants with one overall app. A way to view menus
and locations and even book a reservation. Every element in this app was created to be fresh and inviting,
while being very accessible. This app includes the following pages for each restaurant: homepage, nightly
specials, covid restrictions, and a reservation form. Throughout these pages, there is a consistent
hamburger menu navigation that helps enhance the user experience.
Colours
Originally, I was using multiple colours for each restaurant, but during the testing stages, I found that
all the colours led to not the best user experience, as although all the restaurants are unique in their own
ways, they're all apart of the same chain, Family of Eatieries, and the wide range of colours used alienated
the restaurants. To tackle this challenge, I found that by giving each restaurant their own colour and using
various shades of that colour was able to maintain the uniqueness of each brand, while being able to
associate it with the same chain.
Nightly Specials Page.
I struggled with solidifying an idea on how to present this page, as I had numerous ideas on how it could be
displayed - each being very different from one another. To combat this issue, I went back to the objective
of this project: present a simple, yet beautiful interface This allowed me to follow through with the idea
that best met the client's needs.
JavaScript.
When this project was first assigned, I was new to JavaScript, and struggled with GSAP. This resulted in me
facing the challenge of executing the animations that were presented in the Adobe XD file I showed the
clients. To overcome this challenge, I dedicated time to learning more about GSAP through research and
practicing, which allowed me to carry out the animations originally presented.